<link type="text/css" href="/Public/Js/jquery-ui/jquery.ui.all.css" rel="stylesheet" /> 
  
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.core.js"></script>  
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="/Public/Js/jquery-ui/jquery.ui.draggable.js"></script> 

<script type="text/javascript" src="/Public/Js/icolor/js/jquery.icolor.min.js"></script> 
<script type="text/javascript" src="/Public/Js/smsEditer/smsediter.js"></script> 
<link href="/Public/Js/smsEditer/layout.css" rel="stylesheet" type="text/css"  />
<script type="text/javascript" src="__PUBLIC__/Js/jquery.form.js"></script>
<link href="__PUBLIC__/Js/setavatar/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/Js/setavatar/jquery.imgareaselect.min.js"></script>
<php>
/**
*	调用图片生成工具thumb.php的封装方法．
**/
function _getSmsPhoto($photopath,$w,$h) {
	//return "/thumb.php?w=".$w."&h=".$h."&url=http://".$_SERVER['HTTP_HOST'].$photopath;
	return "/thumb.php?w=".$w."&h=".$h."&url=.".$photopath;
}
/** 查询彩信模板分类信息 **/
$smst_dict 	= service('Dict')->getAllDictByCode('smstemplet');
$smsing_X = 240;
$smsing_Y = 152;
$smsing_Ratio = "8:5";
$_smsEditer_default_sendpic = "/Public/Js/smsEditer/img/default.jpg";
$_smsEditer_default_editpic = "/Public/Js/smsEditer/img/edit_alert.jpg";
</php>
<script type="text/javascript">
function sms_getThumbBaseUrl(w,h,imgpath,rand){
		//rand为了避免加载缓存而设置的随机数
		//var _imgurl = "<php>echo ''.$_SERVER['HTTP_HOST'].getAttachUrl('');</php>"+imgpath;
		//if(rand==null)_baseurl = "/thumb.php?w="+w+"&h="+h+"&url=http://";
		//else _baseurl = "/thumb.php?w="+w+"&h="+h+"&rand="+rand+"&url=http://";
		//return _baseurl+_imgurl;
		var _imgurl = "<php>echo '.'.getAttachUrl('');</php>"+imgpath;
		if(rand==null)_baseurl = "/thumb.php?w="+w+"&h="+h+"&url=";
		else _baseurl = "/thumb.php?w="+w+"&h="+h+"&rand="+rand+"&url=";
		return _baseurl+_imgurl;
}
var _smst_relbaseurl = "{:getAttachUrl('')}";
var _smst_geturl = "{:U('Index://Sms/getJsonSmsTemplet')}";//查询ｓｍｓ模板路陉
var _smsEditer_default_sendpic = "{$_smsEditer_default_sendpic}";
var _smsEditer_default_editpic = "{$_smsEditer_default_editpic}";
</script> 
<style type="text/css">
			.icolor{position:absolute;}
			.icolor_flat,.icolor_ft{position:relative;}
			.icolor td{width: 15px;height: 15px;border: solid 1px #000000;	cursor:pointer;}
			.icolor table{background-color: #FFFFFF;border: solid 1px #ccc;}
			.icolor .icolor_tbx{width:170px;border-top:1px solid #999;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
			.icolor_ok img{border:none;}
			
			.icolorC, .icolorC h2{width:500px;margin:80px auto;}
			#icolor3 .icolor_tbx{width:154px;padding-right:16px;}
			#icolor3 .icolor_ok{position:absolute;left:154px;top:50%;margin-top:-8px;}
</style>
<div class="sms_edit_panel" id="smsediter">
  		<div class="panel-title">
         <ul class="column-tab">
            <li class="tab-title tab-title-current" rel='edit'>编辑彩信</li>
            <li class="tab-title tab-title-partition" rel='partition'>&nbsp;</li>
            <li class="tab-title tab-title-current" rel='all'
            		onclick="sms_getSmsTemplet('all');">全部</li>
            <volist id="vo" name="smst_dict">
            	<li class="tab-title" rel='{$vo['code']}' 
            			onclick="sms_getSmsTemplet('{$vo['code']}');">{$vo['desc']}</li>
         		</volist>
         		<php>if(!empty($_SESSION['mid'])){</php>
            <li class="tab-title" rel='my'
            		onclick="sms_getSmsTemplet('my');">我的名片</li>
            
            <li class="tab-title" rel='upload'
            		onclick="sms_settitlestyle('upload');">上传编辑</li>
            <php>}</php>
         </ul>
      	</div>
					 	
		<div class="left_area">
				<div class="opt_area">
					<div style="padding-bottom:5px;">操作</div>
		     			<div class="clear"></div>
		    		<div style="border:1px solid #EBEBEB;border-left:0px;background-color: #F2F2F2;">
				      	<img 	src="/Public/Js/smsEditer/img/icon-fontsize.gif" id="" 
				      				title="选择字体大小！">
				      				
				      	<img 	src="/Public/Js/smsEditer/img/icon-color.gif" id="icolor4" 
				      				title="设置字体颜色！">
				      					
				      	<img 	src="/Public/Js/smsEditer/img/icon-expression.gif" id="sms_show_iconarea" rel='0'
				      				onclick="//$(element).offset().left
															 $('#sms_icon_area').css('left',$(this).offset().left-1);
															 $('#sms_icon_area').css('top' ,$(this).offset().top+16);
															 //$(element).offset(.top
				      								 if($(this).attr('rel')==0){
				      								 		$('#sms_icon_area').removeClass('hide');
				      								 		$(this).attr('rel','1');
				      								 }else{
				      								 		$('#sms_icon_area').addClass('hide');
				      								 		$(this).attr('rel','0');
				      								 }
				      								"
				      				title="添加表情！">
				      	<php>if(!empty($_SESSION['mid'])){</php>		
				      	<img 	src="/Public/Js/smsEditer/img/icon-upload.gif" 
				      				onclick="sms_createSmsBackGround()" 
				      				title="将所选图标与背景融合！生成新背景！">
				      	<php>}</php>			
				      	<img 	src="/Public/Js/smsEditer/img/icon-preview.gif" 
				      				onclick="submitPrivew();"
				      				title="预览结果！">
				    </div>
		     	</div>
		     	<include file="../Public/Js/smsEditer/icon.html" />
		     	
		     	<div style="float:left;">
		     			<div style="padding-bottom:5px;">点击下放图片即可录入文字！</div>
		     			<div class="clear"></div>
						<div style="background: url('{:getAttachUrl(getMmsBg($_sms_editer_shelfid))}') no-repeat scroll 0 0 transparent;">
							<div id='show_sms_bg'>
								<div class="left hide" id="sms_photo_big4edit"
									style="width: {$smsing_X}px; height: {$smsing_Y}px; border:1px solid #B4B5AF;overflow: hidden;">
									<img id="photo_big" src="{$_smsEditer_default_editpic}" title="上传图片剪切结果展示区！"/>
								</div>
								<textarea id="inputtext" wrap="hard"
											style="background:no-repeat scroll 0 0 transparent;background-image: url('{$_smsEditer_default_sendpic}');"
											 title="点击录入文字信息！"></textarea>
			    			</div>
			    			
			    			<div class="clear"></div>
			    			<div style="border-left: 1px solid #CCCCCC;border-right: 1px solid #CCCCCC;
				      					border-bottom: 1px solid #CCCCCC;height: 165px;width: 240px;" title="非编辑区，礼品相关信息展示！">
								<!-- 放在此以防ie下整个div高度变化 -->
								<img id="sms_draggable_icon" src='' class='hide' title="拖拽移动图标位置！"
					        		style="left: 2px;position: relative;top: -152px;margin:2px;cursor: pointer;">
					        
			    			</div>
		    			</div>
    			</div>
    			<div class="clear"></div>
		</div>
			
    	<div class="right_area">
    			<div id='list_sms_thumbs'>
    				<div id="thumbs">
							<ul class="thumbs" id='sms_thumb_item_ul'>
								
								<li class="unselected hide">
										<img src="" rel='' title="点击选择该图片做为背景！">
								</li>
								
								<li class="unselected hide">
										<img src="" rel='' title="点击选择该图片做为背景！">
								</li>
								<li class="unselected hide">
										<img src="" rel='' title="点击选择该图片做为背景！">
								</li>
								
								<li class="unselected hide">
										<img src="" rel='' title="点击选择该图片做为背景！">
								</li>
							</ul>
						</div>
						<div class="clear"></div>
	    			<div >
	    			<div class="clear"></div>
		    			<div id='sms_thumbs_nav'  class="page_box" 
		    						style="height: 24px;line-height: 23px;padding-bottom: 10px;
		    									padding-right: 20px;padding-top: 10px;float: right;text-align: center;">
		    			</div>
	    			</div>
    			</div>
    			
    			<php>if(!empty($_SESSION['mid'])){</php>
    				<div id='sms_upload_area' class='hide'>
    					<!-- 上传彩信图片ｓｔａｒｔ -->
    					<div style="display: block; margin-top: -20px;">
		            		<div style="margin:0px 15px;">
								<div style="padding:10px 0;color:#666;"> 
									<form style="width:220px;float: left;" enctype="multipart/form-data" method="post" id="uploadpic" name="upform" dotype="ajax" callback="uploadpic" target="upload_target" 
												action="{:U('Index://Sms/smsimg',array('t'=>'upload'))}">
										<input type="file" name="Filedata" onchange="douploadpic()" id="Filedata" style="height:23px"/> 
										<span style="display:none;" id="loading_gif">
										<img src="__PUBLIC__/Js/avatar/loading.gif" align="absmiddle" />上传中，请稍侯......</span>  
									</form>
									<form style="width:130px;float: right;" enctype="multipart/form-data" method="post" 
													id='upform' name="upform" dotype="ajax" callback="dosaveface" target="_blank" 
													action="{:U('Index://Sms/smsimg',array('t'=>'save'))}">
										<input type="hidden" name="picurl">
										<input type="hidden" name="x1">
										<input type="hidden" name="y1">
										<input type="hidden" name="x2">
										<input type="hidden" name="y2">
										<input type="hidden" name="w">
										<input type="hidden" name="h">
										<input type="submit" class="btn_w" value="确定" /> 
										<input type="button" class="btn_w" value="取消" onclick="unSetSmsimg()" />
									</form>
								</div>
								 
				              	<div class="picSettings" style="margin-top:25px;">
				                	<div id="photo" class="left" style="width:100%; height:320px;">
									</div>		
                				</div>
                			</div>
						</div><!-- 上传彩信图片ｅｎｄ -->
    				</div>
    			<php>}</php>
    	</div>

    	<div class="clear"></div>
		
     	<form action="{:U('Index://Sms/preview')}" method='post' id='privewform' target="_blank">
     			<input type='hidden' name='smsimg' id='smsimg' value="{$_smsEditer_default_sendpic}">
     			<input type='hidden' name='smstext' id='smstext'>
     			<input type='hidden' name='xyOffset' id='xyOffset'>
     			<input type='hidden' name='textcolor' id='textcolor'>
     			<input type='hidden' name='smsicon' id='smsicon'>
     			<input type='hidden' name='ispreview' id='ispreview' value='yes'>
     	</form>
	</div>
	
	
<script type="text/javascript">
	var hs = document.location.hash;
	var up_pic_width ={$smsing_X};
	var up_pic_height ={$smsing_Y};
	var imgrs;
	
	_tmp_initForm('uploadpic');
	_tmp_initForm('upform');
	
	
	function _tmp_initForm(formid){
		//监听 form 表单提交
	  	$("#"+formid).bind('submit', function() {
						var callbackfun = $(this).attr('callback');
						var type   = $(this).attr('type');
						var options = {
						    success: function(txt) {
						    	//alert(txt);
						    	//txt = eval("("+txt+")");
									if(callbackfun){
										callback(eval(callbackfun),txt);
									}else{
										  if(txt.boolen){
											  ui.success( txt.message );
										  }else{
											  ui.error( txt.message );
										  }
										  	 
									}
						    }
						};		
	          			$(this).ajaxSubmit(options);
			 			return false;
	    });
	}
	
	function callback(fun,argum){
		fun(argum);
	}
	
	/**裁剪完的图片上传后返回结果的处理函数**/
	function dosaveface(txt){
		//alert(txt);
		var txt = eval('('+txt+')');
		if (txt.status==1) {
			k_success('更新成功');
			unSetSmsimg();
			sms_getSmsTemplet('my',1);
			$('#smsediter').find('#inputtext')
							.css('background', "url('"+sms_getThumbBaseUrl( '{$smsing_X}' , '{$smsing_Y}' ,txt.smsimg_path)+"')"); 
			$('#smsediter').find('#smsimg').val(txt.smsimg_path);
		}else {
			k_error('更新失败');
		}
	}
	
	/**上传要裁减的图片**/
	function douploadpic(){
			//alert('111');
			$('#smsediter').find('#loading_gif').show();
			$('#smsediter').find('input[name="Filedata"]').hide();
			var options = {
						error:function(txt){
								//alert('error:'+txt);
						},
				    success: function(txt) {
				    	//alert('success:'+txt);
							uploadpic(txt);
				    }
			};		
			$('#smsediter').find('#uploadpic').ajaxSubmit(options);
		  return false;		
	}
	
	/**上传裁减的图片成功后，进行的初始化函数。设置页面让用户进行图片裁减。**/
	function uploadpic(txt){
		//alert(txt);
		var txt = eval('('+txt+')');
		if(txt.code==1){
			var tmpDate = new Date(); 
			set_UP_W_H(txt.data['picwidth'],txt.data['picheight']);
			var defautlv = ( txt.data['picwidth'] > txt.data['picheight']) ?txt.data['picheight']:txt.data['picwidth'];
	//		$("#photo").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
			$('#smsediter').find("#photo").html("<img id='photo_img' src="+txt.data['picurl']+'?t='+ tmpDate.getTime()+">");
			$('#smsediter').find("input[name=picurl]").attr('value',txt.data['picurl']);
			$('#smsediter').find("#photo_big").attr('src',txt.data['picurl']+'?t='+ tmpDate.getTime());
		
		 	imgrs = $('#smsediter').find('#photo_img').imgAreaSelect({ 
						x1: 0, 
						y1: 0,
					  x2: {$smsing_X}, 
						y2: {$smsing_Y}, 
						handles: true,
						onInit:preview,
						onSelectChange:preview,
						onSelectEnd:onSelectEnd,
						//aspectRatio: '1:1',
						aspectRatio: '{$smsing_Ratio}',
						instance: true,
						parent:$('#smsediter').find('#photo')
						});
		 	$('#smsediter').find('#loading_gif').hide();
		 }else{
		 	alert(txt.message);
		 }
	}
	
	//重新上传图片
	function unSetSmsimg(){
		var defaultpic = '{$_smsEditer_default_editpic}';
		$('#smsediter').find('input[name="Filedata"]').show();
		$('#smsediter').find('loading_gif').hide();
		$('#smsediter').find("#photo").html("");
		$('#smsediter').find("input[name=picurl]").attr('value','');
		$('#smsediter').find("#photo_big").attr('src',defaultpic);
		$('#smsediter').find('#photo_big').attr('style','position: relative;');
	 	imgrs.setOptions({ remove:true });
	 	imgrs.update();
	};	
	
	function set_UP_W_H(w,h){
		up_pic_width = w;
		up_pic_height = h;
	}	
		
	function onSelectEnd(img,selection){
		$('#smsediter').find('input[name=x1]').val(selection.x1);
		$('#smsediter').find('input[name=y1]').val(selection.y1);
		$('#smsediter').find('input[name=x2]').val(selection.x2);
		$('#smsediter').find('input[name=y2]').val(selection.y2); 
		$('#smsediter').find('input[name=w]').val(selection.width); 
		$('#smsediter').find('input[name=h]').val(selection.height); 
	}
		
	function preview(img, selection) {
			onSelectEnd(img,selection);
			var big_scaleX = {$smsing_X} / (selection.width || 1);
	    var big_scaleY = {$smsing_Y} / (selection.height || 1);
		
	    $('#smsediter').find('#photo_big').css({
	        width: Math.round(big_scaleX * up_pic_width) + 'px',
	        height: Math.round(big_scaleY * up_pic_height) + 'px',
	        marginLeft: '-' + Math.round(big_scaleX * selection.x1) + 'px',
	        marginTop: '-' + Math.round(big_scaleY * selection.y1) + 'px'
	    });
	}		
	
</script>